<extend name="./public/frame.html"/>
<block name="content">
    <style>
        blockquote {
            -webkit-margin-end: 0px;
        }
    </style>
    <div class="layui-row">
        <blockquote class="layui-elem-quote search">
            <div class="layui-inline">
                <input type="text" name="title" lay-verify="required" required placeholder="请输入标题内容" class="layui-input" id="title" style="width: 200px;">
            </div>
            <div class="layui-inline">
                <input type="text" name="add_admin_name" lay-verify="required" required placeholder="添加人" class="layui-input" id="add_admin_name" style="width: 120px;">
            </div>
            <div class="layui-inline">
                <select name="system_type" lay-filter="" id="system_type" class="layui-input" style="width: 160px;">
                    <option value="">全部客户端</option>
                    <option value="1">小马出行安卓端</option>
                    <option value="2">小马出行IOS端</option>
                    <option value="3">小马出行司机安卓端</option>
                    <option value="4">小马出行司机IOS端</option>
                </select>
            </div>
            显示城市：
            <div class="layui-inline">
                <select name="province" lay-filter="province_id" id="province_id" class="layui-input" style="width: 120px;" onchange="provinceChange();">
                    <option value="">请选择省份</option>
                    <volist name="province" id="vo">
                        <option value="{$vo['region_id']}">{$vo['region_name']}</option>
                    </volist>
                </select>
            </div>
            <div class="layui-inline">
                <select name="city" lay-filter="city_id" id="city_id" class="layui-input" style="width: 120px;">
                    <option value="">请选择城市</option>
                </select>
            </div>
            <div class="layui-inline">
                <select name="type" lay-filter="" id="type" class="layui-input" style="width: 120px;">
                    <option value="1">显示时间</option>
                    <option value="2">添加时间</option>
                </select>
            </div>
            <div class="layui-inline">
                <input type="text" name="startTime" lay-verify="required" required autocomplete="off" placeholder="开始时间" class="layui-input date" id="startTime">
            </div>
            <div class="layui-inline">
                <input type="text" name="endTime" lay-verify="required" required autocomplete="off" placeholder="结束时间" class="layui-input date" id="endTime">
            </div>
            <div class="layui-inline">
                <button class="layui-btn" data-type="search">搜索</button>
                <button class="layui-btn layui-btn-disabled" data-type="" id="reset">复位</button>
                <button class="layui-btn layui-btn-warm" data-type="add" id="add">添加闪屏</button>
            </div>
        </blockquote>

        <table class="layui-table" lay-data="{width:'auto', height:'auto', url:'{$url}', page: true, limit: 10, id:'splashPage'}" lay-filter="splashPage">
            <thead>
            <tr>
                <th lay-data="{field:'id', width:80,align:'center', fixed: true, sort: true}">ID</th>
                <th lay-data="{field:'title', width:150,align:'center'}">标题</th>
                <th lay-data="{field:'system_name', width:240,align:'center'}">APP系统</th>
                <th lay-data="{field:'display_time', width:100,align:'center'}">显示时长(秒)</th>
                <th lay-data="{field:'display_date', width:340,align:'center'}">显示日期</th>
                <th lay-data="{field:'display_citys', width:200,align:'center'}">显示城市</th>
                <th lay-data="{field:'add_time', width:200,align:'center'}">添加时间</th>
                <th lay-data="{field:'add_admin_name', width:100,align:'center'}">添加人</th>
                <th lay-data="{fixed:'right', toolbar: '#barDemo', width:210, align:'center'}">操作</th>
            </tr>
            </thead>
        </table>
        <div class="layui-hide" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit" style="width: 50px">修改</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" style="width: 50px">删除</a>
        </div>
    </div>

    <script>
        layui.use(['table','laydate'], function () {
            var table = layui.table
                ,laydate = layui.laydate;
            lay('.date').each(function(){
                laydate.render({
                    elem: this
                    ,type: 'datetime'
                    ,trigger: 'click'
                });
            });

            //点击添加加盟商
            layui.jquery(document).on('click', '#add', function(){
                layer.open({
                    type: 2,
                    title: '新增闪屏',
//                    shadeClose: true,
                    shade: 0.8,
                    area: ['100%', '100%'],
                    content: '{:url("/admin/SplashPage/add")}'
                });
            });

            var $ = layui.jquery, active = {
                search: function () {
                    var title = $.trim($('#title').val()),
                        add_admin_name = $.trim($('#add_admin_name').val()),
                        system_type = $('#system_type').val(),
                        province_id = $('#province_id').val(),
                        city_id = $('#city_id').val(),
                        type = $('#type').val(),
                        start_time = $('#startTime').val(),
                        end_time = $('#endTime').val(),
                        reset = $('#reset');
                    if(title||add_admin_name||system_type||province_id||city_id||type||start_time||start_time){
                        reset.removeClass('layui-btn-disabled').addClass('layui-btn-normal').data('type', 'reset');

                        table.reload('splashPage',{
                            url: '/admin/SplashPage/table',
                            where: {
                                title : title,
                                add_admin_name : add_admin_name,
                                system_type : system_type,
                                province_id : province_id,
                                city_id : city_id,
                                type : type,
                                start_time : start_time,
                                end_time : end_time
                            } //设定异步数据接口的额外参数
                        });

                    }else{
                        reset.removeClass('layui-btn-normal').addClass('layui-btn-disabled').data('type', '');
                        alert('搜索项不能为空');
                    }
                }
                , reset: function () {
                    var reset = $('#reset');
                    if (reset.data('type') !== '') {
                        table.reload('splashPage',{
                            url: '/admin/splashPage/table', where:{}
                        });
                    }
                    $('.layui-input').each(function () {
                        $(this).val('');
                    });
                    $('.layui-this').each(function () {
                        $(this).removeClass('layui-this');
                    });
                    reset.removeClass('layui-btn-normal').addClass('layui-btn-disabled').data('type', '');
                }
//                , excel: function () {
//                    var province_id = $('#province_id').val(),
//                        city_id = $('#city_id').val(),
//                        type = $('#type').val(),
//                        start = $('#start').val(),
//                        end = $('#end').val(),
//                        start_arean = $("#start_arean").val(),
//                        end_arean = $("#end_arean").val(),
//                        order_sn = $.trim($('#order_sn').val()),
//                        type_phone = $('#type_phone').val(),
//                        phone = $.trim($('#phone').val()),
//                        order_status = $('#order_status').val(),
//                        car_plate = $.trim($('#car_plate').val()),
//                        pay_type = $('#pay_type').val(),
//                        is_pay = $('#is_pay').val();
//                    var str = "&phone="+ phone + "&type=" + type + "&start="
//                        + start + "&end=" + end + "&order_status=" + order_status+ "&pay_type=" + pay_type
//                        + "&car_plate=" + car_plate + "&start_arean=" + start_arean + "&end_arean=" + end_arean + "&province_id=" + province_id + "&city_id=" + city_id + "&order_sn=" + order_sn+ "&type_phone=" + type_phone + "&is_pay=" + is_pay;
//                    layer.confirm('请选择导出内容:', {
//                        btn: ['全部数据', '取消'] //可以无限个按钮
//                        , btn3: function (index, layero) {
//                            layer.close(index);
//                        }
//                    }, function (index, layero) {
//                        //按钮【按钮一】的回调
//                        location = "{:url('excel','all=1')}"+str ;
//                        layer.close(index);
//                    }, function (index) {
////                        location = "{:url('excel','all=2')}" + str+"&page="+_cur_page+"&limit="+_cur_limit;
////                        layer.close(index);
//                    });
//                }
            };
            $('.layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });


            table.on('tool(splashPage)', function (obj) {
                var data = obj.data;
                var id = data.id;
                if (obj.event === 'del') {
                    layer.confirm('确定删除吗?',function(index){
                        var url = '{:url("/admin/splashPage/del","id=")}' + id;
                        $.get(url,function(data){
                            if(data.code == 1){
                                layer.msg(data.msg,{'icon':1});
                                setTimeout(function(){
                                    window.location.reload();
                                }, 1000);

                            }else{
                                layer.msg(data.msg,{'icon':2});
                            }
                        },'json');
                        layer.close(index);
                    })

                } else if (obj.event === 'edit') {
                    layer.open({
                        type: 2,
                        title: '闪屏信息修改',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: '{:url("/admin/splashPage/edit","id=")}' + id //iframe的url
                    });
                }
            });
        });

        function provinceChange() {
            var province_id = $("#province_id").val();
            if(province_id === 0) {
                $("#city_id").empty();
                $("#city_id").append('<option value=>请选择城市</option>');
                return false;
            }

            $.ajax({
                type: 'POST',
                url: "{:url('/admin/Franchisee/cityList')}",
                data: {'province_id':province_id},
//                dataType:  'json',
                success:function(res){
                    $("select[name='city']").empty();
                    $("#city_id").append("<option value=''>全部城市</option>" + res);
                },
                error:function (res) {
                    layer.msg('请求错误');return false;
                }
            });
        }
    </script>
</block>